<template>
	<div class="visitor-7">
		<div ref="visitor7" class="line"></div>
	</div>
</template>

<script>
	import echarts from 'echarts'
	import {$get} from '@/puigins/request.js'
	export default {
		data() {
			return {
				visitor7: null,
				visitor7Option: {

					backgroundColor: '#FFFFFF',

					title: {
						text: '7日访问量趋势',
						x: 'center',
						y: 10
					},

					legend: {
						// orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
						orient: 'horizontal',
						// x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
						x: 'left',
						// y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
						y: 'top'
					},

					//  图表距边框的距离,可选值：'百分比'¦ {number}（单位px）
					grid: {
						top: '16%', // 等价于 y: '16%'
						left: '3%',
						right: '8%',
						bottom: '3%',
						containLabel: true
					},

					// 提示框
					tooltip: {
						trigger: 'axis'
					},

					//工具框，可以选择
					toolbox: {
						feature: {
							// saveAsImage: {} //下载工具
						}
					},

					xAxis: {
						name: '日期',
						type: 'category',
						axisLine: {
							lineStyle: {
								// 设置x轴颜色
								color: '#912CEE'
							}
						},
						// 设置X轴数据旋转倾斜
						axisLabel: {
							// rotate: 30, // 旋转角度
							// interval: 2 //设置X轴数据间隔几个显示一个，为0表示都显示
						},
						// boundaryGap值为false的时候，折线第一个点在y轴上
						boundaryGap: true,
						data: []
					},

					yAxis: {
						name: '数值',
						type: 'value',
						// min: 0, // 设置y轴刻度的最小值
						// max: 1800, // 设置y轴刻度的最大值
						// splitNumber: 9, // 设置y轴刻度间隔个数
						axisLine: {
							lineStyle: {
								// 设置y轴颜色
								color: '#87CEFA'
							}
						},
					},

					series: [
						{
							name: '访问量',
							data: [],
							type: 'line',
							// 设置折线上圆点大小
							symbolSize: 8,
							smooth: 0.2,
							itemStyle: {
								normal: {
									// 拐点上显示数值
									label: {
										show: true,
										color:'red'
									},
									borderColor: 'red', // 拐点边框颜色
									lineStyle: {
										width: 5, // 设置线宽
										type: 'solid' //'dotted'虚线 'solid'实线
									}
								}
							}
						}
					],

					color: ['#00EE00']
				}
			}
		},
		mounted() {
		},
		created() {
			$get("/admin/dashboard/getVisitor7").then(res=>{
				if(res.code==200){
					let dates = res.data.dates
					let values=res.data.values
					this.visitor7Option.series[0].data = values
					this.visitor7Option.xAxis.data = dates
					this.visitor7 = echarts.init(this.$refs.visitor7)
					this.visitor7.setOption(this.visitor7Option)
				}else{
					this.$msgError(res)
				}
			})
		}
	}
</script>

<style lang="scss">
	.visitor-7 {
		height: 500px;
		// width: 100%;
		padding: 0 30px 30px;

		.line {
			width: 100%;
			height: 100%;
		}
	}
</style>
